import ProgressBar from '@/assets/progress-bar.png'

import Bg from '@/assets/rending-1.jpg'

import Title from '@/assets/rending-2.png'
import Kang from '@/assets/rending-3.png'

import { XyzTransitionGroup } from '@animxyz/react'
import FakeProgress from 'fake-progress'
import { useEffect, useRef, useState } from 'react'

import { history, useSearchParams } from 'umi'
import '@animxyz/core'
import delay from 'delay'

const p = new FakeProgress({
  timeConstant: 5000,
  autoStart: true,
})

export default function Page() {
  const [progress, setProgress] = useState<number>(0)
  const timeout = useRef<globalThis.NodeJS.Timeout>()

  // ?获取URL上的ID
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')
  const city = searchParams.get('city')

  useEffect(() => {
    timeout.current = setInterval(() => {
      setProgress(Math.round(p.progress * 100))
    }, 50)

    setTimeout(() => {
      handleEnd()
    }, 3000)
  }, [])

  async function handleEnd() {
    clearInterval(timeout.current)
    p.end()
    setProgress(100)
    await delay(1000)
    history.replace(`/result?id=${id}&city=${city}`)
  }

  return (
    <XyzTransitionGroup
      appear
      appearVisible
      duration="auto"
      xyz="fade small-4 appear-stagger"
      className="flex flex-col items-center justify-center min-h-screen bg-center bg-cover"
      style={{ backgroundImage: `url(${Bg})` }}
    >

      <h1 className="w-[858px] h-[504px] bg-cover" style={{ backgroundImage: `url(${Title})` }}></h1>
      <img src={Kang} className="w-[500px] block mx-auto" alt="" />
      <p
        className="mt-20 text-5xl font-medium text-primary Hanyi"

      >
        预测中...
      </p>

      <div className="w-[520px] h-[80px] border-[10px] border-primary rounded-full mt-8 p-[10px]">
        <i className="block h-full transition-all rounded-full" style={{ width: `${progress}%`, backgroundImage: `url(${ProgressBar})`, backgroundSize: 'auto 100%', backgroundPosition: 'left center' }}></i>
      </div>
    </XyzTransitionGroup>
  )
}
